<template>
    <a-drawer :title="title" :maskClosable="false" :width="500" :visible="visible"
        :body-style="{ paddingBottom: '80px' }" @close="onClose">
        <a-form ref="formRef" :model="data" :rules="rules" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="配置Key" name="name">
                        <a-input v-model:value="data.name" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="备注" name="remark">
                        <a-input v-model:value="data.remark" />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="配置内容" name="value">
                        <CodeEditor v-model="data.value" type="yaml" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit" :loading="loading">提交</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>
<script setup lang="ts">
import type { Configration } from "@/api/configrationApi"
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue/lib/form/Form';
import type { Ref } from 'vue';

const props = defineProps<{
    title?: string
    loading?: boolean
    visible: boolean
    data: Configration
}>()
const emit = defineEmits<{
    (event: 'close'): void
    (event: 'submit', formRef: Ref<FormInstance | undefined>, model: Configration): void
}>()

const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: '不能为空' }],
    remark: [{ required: true, message: '不能为空' }],
    value: [{ required: true, message: '不能为空' }]
};

const formRef = ref<FormInstance>();
const onClose = () => {
    emit('close')
    formRef.value?.resetFields()
}
const onSubmit = async () => {
    try {
        await formRef.value?.validateFields()
        emit('submit', formRef, props.data)
    } catch (error) {

    }
}

</script>

